<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/>
		<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="css/master.css"/>
		<script src="js/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/dind-tab.css"/>
		
		
	</head>
	<body>
		
		<a href="listadd.html" class="find-add">
			<em class="iconfont icon-add-fill"></em>
		</a>
		<div class="container">
			<!-- header -->
			<header id="community-tit">
				<img src="img/top.png" class="zhuangtailan">
				<ul>
					<li>
						<a href="community-focus.1.html" class="community-focus">关注</a>
					</li>
					<li>
						<a href="community-find.html"  class="community-find community-spec">发现</a>
					</li>
					<li>
						<a href="search.html" class="iconfont icon-search"></a>
					</li>
				</ul>
			</header>
			<main id='find-main'>
				<div class="find-banner">
					
				</div>
				
				<div class="meet-tit"><em class="meet-left"></em>热门达人—人人都是艺术家</div>
				<div class="find-top">
					<div class="find-top-tit">
					
					</div>
					</div>
					<div class="tabs">
						
							
						
					</div>
					<div id="tabs-container" class="swiper-container">
						<div class="swiper-wrapper">
							
					<div class="swiper-slide">
					<div class="find-con" >
					
					</div>
					</div>
					<div class="swiper-slide">
					<div class="find-con">
						
					</div>
					</div>
					<div class="swiper-slide">
					<div class="find-con">
						
					</div>
					</div>
					<div class="swiper-slide">
					<div class="find-con">
						
					</div>
					</div>
					
				</div>
			</div>	
			</main>
			
			<footer>
				
				<a href="index-rec.html">
										<span class="iconfont icon-shouye
				"></span>
										<p>首页</p>
									</a>
									
									<a href="meet.html">
										<span class="iconfont icon-tupian
				"></span>
										<p>遇见</p>
									</a>
									
									<a href="community-focus.html ">
										<span class="iconfont icon-shequ-weijihuo" style="color:#EEC14F ;"></span>
										<p  style="color:#EEC14F ;">社区</p>
									</a>
									
									<a href="selfcenter.html">
										<span class="iconfont icon-wode"></span>
										<p>我的</p>
									</a>
				</footer>
			</div>
			
			<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				window.onload = function() {
					let focusAddApi='http://15637237221.wicp.vip/yh/Bbs/followHotUser.do'
					let contentApi='http://15637237221.wicp.vip/yh/Bbs/findHotUser.do'
					let token=localStorage.getItem('token');
					let focuscancelApi='http://15637237221.wicp.vip/yh/Bbs/unfollowHotUser.do'
					let activePicApi='http://15637237221.wicp.vip/yh/Bbs/findActiveImg.do'
					let tabApi='http://15637237221.wicp.vip/yh/Bbs/findTypeContext.do';
					let tabListApi='http://15637237221.wicp.vip/yh/Bbs/findTypeName.do'
					//热门达人请求
					axios.post(contentApi,{
					
					}).then(res=>{
						console.log(res)
						console.log(res.data.info.hotUserShowNumList)
						let arr = res.data.info.hotUserList;
						let arr2=res.data.info.hotUserShowNumList
						let html=''
						let hotUserlist=document.querySelector('.find-top-tit')
						let hotUser=arr[parseInt(Math.random()*7)]
						let zpNum=arr2[parseInt(Math.random()*3)]
					
						console.log(hotUser)
						html=`
						<figure>
							<div class="find-pic-wrap">
								<img src="${hotUser.userImgUrl}" >
							</div>
							<a href="javascript:;" class="find-guanzhu" selfId="${hotUser.userId}">+关注</a>
							<figcaption>
								
								<p>${hotUser.username}</p>
								<span>${hotUser.fansNumber}粉丝</span><span self>${zpNum}作品</span>
								<br>
								<em>#水彩</em><em>#彩铅</em><em>#疯狂</em>
							</figcaption>
						</figure>
						
						<div class="shouhui">
							
						</div>
						
						`
						hotUserlist.innerHTML=html;
						let shouhui=document.querySelector('.shouhui')
						let picArr=res.data.info.hotSuperUserShowImg
						console.log(picArr)
						let html5=''
						for(let i =0;i<picArr.length;i++){
							html5+=`
							<div class="shouhui-wrap">
								<img src="${picArr[i].imgUrl}" >
							</div>
							
							`
						}
						shouhui.innerHTML=html5
						
						//关注达人按钮
						let btn=document.querySelector('.find-guanzhu')
						console.log(btn)
						
						btn.onclick=function(){
							if(token){
							let userFollowApi='http://15637237221.wicp.vip/yh/mine/followUser.do'
							let followId=this.getAttribute('selfId') 
							axios.post(userFollowApi,{
								token
							}).then(res=>{
								console.log(res.data.info)
								let arr = res.data.info;
								let targetObj=arr.find(v=>v.id==followId)
								if(targetObj){
									this.innerHTML='+关注'
									this.style.background='#EEC14F'
										axios.post(focuscancelApi,{
											token,followId
										}).then(res=>{
											console.log(res)
											alert(res.data.info)
										})
								}else{
									this.innerHTML='已关注'
									this.style.background='pink';
									axios.post(focusAddApi,{
										token,followId
									}).then(res=>{
										console.log(res)
										alert(res.data.info)
									})		
								}
							})	
							}else{
								alert('请登录')
								location.href='login.html'
							}
						
						}
					})
					
					//社区发现图片请求
					let list=document.querySelector('.find-banner')
					axios.post(activePicApi,{
					
					}).then(res=>{
						console.log(res.data.info)
						let arr = res.data.info;
						let html=''
						for(let i  = 0;i<arr.length;i++){
							html+=`
							<img src="${arr[i].activeImgUrl}" >
							`
							
						}
						list.innerHTML=html
					})
					
					//选项卡列表请求
					let list1=document.querySelector('.tabs')
					console.log(list1)
					axios.post(tabListApi,{
						
					}).then(res=>{
						console.log(res.data.info);
						let arr=res.data.info
						
						let html=''
						for(let i = 0;i<arr.length;i++){
							html+=`<a href="#" selfId='${arr[i].typeId}'>${arr[i].typeName}</a>`
						}
						list1.innerHTML=html;
						
					})
					
					
					//选项卡请求
					let boxs=document.querySelectorAll('.find-con')
					console.log(boxs)
					for(let i = 0;i<4;i++){
						axios.post(tabApi,{
						typeId:i+1
					}).then(function(res){
						console.log(res)
						
						let arr2=res.data.info
						console.log(arr2.length)
						console.log(arr2[0].user.userImgUrl)
						let html=''
						for(let k = 0;k<arr2.length;k++){
							html+=`
							<figure>
								<div class="find-con-wrap">
									<img src="${arr2[i].imgUrl}" >
								</div>
								<figcaption>
									<span>${arr2[k].type.typeName}</span>
									<br>
									<p><em><img src="${arr2[i].user.userImgUrl}"></em><span>${arr2[k].themeTitle}</span><img src="img/观看.png" ><i>${arr2[k].watchNumber}w</i></p>
								</figcaption>
							</figure>
							
							`
						}
						boxs[i].innerHTML=html;
						
						
						var tabsSwiper = new Swiper('#tabs-container', {
							speed: 500,
							on: {
								slideChangeTransitionStart: function() {
									$(".tabs .active").removeClass('active');
									$(".tabs a").eq(this.activeIndex).addClass('active');
								}
							}
						})
						$(".tabs a").on('click', function(e) {
							let typeId=this.getAttribute('selfId')
							console.log(typeId)
							e.preventDefault()
							$(".tabs .active").removeClass('active')
							$(this).addClass('active')
							tabsSwiper.slideTo($(this).index());
							
						
						})
						
					})
					}
					
					
				
					
					
				
					
					
				}
			</script>
	</body>
</html>
